<template>
  <view class="field-wrapper">
    <view class="left">
      <text class="txt">{{ title }}</text>
    </view>
    <view class="right">
      <slot name="right">
        <view class="right-c" @tap.stop="$emit('onClick')">
          <text v-if="value" class="txt">{{ value }}</text>
          <text v-else class="placeholder">{{ placeholder }}</text>
          <view class="right-arrow-box">
            <image v-if="showArrow" class="right-arrow" :src="stitchingURL('icons/entry-arrow-right-gray')" />
          </view>
        </view>
      </slot>
    </view>
  </view>
</template>
<script setup>
  import {stitchingURL} from '@/common/util';
  
  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: true
    }
  });
  defineEmits(['onClick']);
</script>
<style lang="scss" scoped>
.field-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36upx 30upx;
  background-color: #fff;
  .left {
    margin-right: 40upx;
    .txt {
      color: #595959;
      text-align: left;
      font-size: 28upx;
      font-style: normal;
      font-weight: 400;
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    .right-c {
      flex: 1;
      max-width: 400upx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .txt {
        font-size: 28upx;
        font-weight: 600;
        color: #30302F;
        line-height: 40upx;
      }
      .placeholder {
        font-size: 28upx;
        color: #A9A9A9;
        line-height: 40upx;
      }
    }
    .right-arrow-box {
      width: 48upx;
      height: 48upx;
      display: flex;
      justify-content: center;
      align-items: center;
      .right-arrow {
        width: 32upx;
        height: 32upx;
      }
    }
  }
}
</style>